<template>
	<view class="nav-box" :style="props.navStyle">
		<view class="flex justify-between items-center h-100">
			<view class="nav-box-left">
				<slot name='left'>
					<u-icon name="yemianfanghuitubiao" custom-prefix="custom-icon" @click="$System.goBack()"
						v-if="props.showBack" />
				</slot>
			</view>
			<view class="title">
				<slot name='title'>{{title}}</slot>
			</view>
			<view class="nav-box-right">
				<slot name='right'></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'
	import {
		usePages
	} from '@/common/usePages.js'

	const props = defineProps({
		navStyle: {
			type: Object,
			default: () => {
				return {
					// backgroundColor: '#f00',
				}
			},
		},
		showBack: {
			type: Boolean,
			default: true,
		},
	})

	const title = ref()

	onLoad((opt) => {
		title.value = usePages().getCurrentTitle()
	})
	onShow(() => {})
</script>

<style>
	.nav-box {
		position: fixed;
		width: 100vw;
		height: var(--navHeight);
		top: 0;

		z-index: 999;
		padding: 88rpx 32rpx 0;
	}

	.nav-box-left,
	.title,
	.nav-box-right {
		width: calc(100vw/3);
	}

	.title {
		text-align: center;
	}

	.nav-box-right {
		text-align: right;
	}
</style>